<template>
	<section>
		<!--start 面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>营销</el-breadcrumb-item>
				<el-breadcrumb-item>订单促销</el-breadcrumb-item>
				<el-breadcrumb-item>新增订单促销</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--end 面包屑-->
		<!--start content-->
		<div class="goodsContent goodSupply">
			<div class="pro-center">
				<el-form :model="saleOrderPruleData" :rules="vue_rule_rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="促销时间" prop="orderPruleDate">
						<el-date-picker v-model="saleOrderPruleData.orderPruleDate" type="datetimerange" placeholder="选择日期范围">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="阶梯促销">
						<el-checkbox v-model="saleOrderPruleData.orderPruleLadder">启用</el-checkbox>
					</el-form-item>
					<el-form-item class="orderPruleType" label="促销规则">
						<el-radio-group v-model="saleOrderPruleData.orderPruleType">
							<el-radio :label="'2'">满减<span style="color: #ccc;">(应付订单总额=订单金额X折扣)</span></el-radio>
							<el-form-item class="font12" v-for="(item,index) in vue_orderPruleDetail" key="1" v-show="saleOrderPruleData.orderPruleType=='2'">
								订单金额{{vue_info_onlyOne}}满
								<el-input class="dazhe-input" @blur="vue_orderPruleDetail_blur($event,index,'pruleKey')" style="width: 80px;" v-model.trim="item.pruleKey"></el-input>
								元，立减
								<el-input class="dazhe-input" @blur="vue_orderPruleDetail_blur($event,index,'pruleVal')" style="width: 80px;" v-model.trim="item.pruleVal"></el-input>
								元
								<i class="el-icon-delete deleteDetail" @click="vue_vue_orderPruleDetail_delete(index)" v-if="index!=0"></i>
							</el-form-item>
							<span @click="vue_orderPruleDetail_add" class="add_orderPruleDetail" v-show="saleOrderPruleData.orderPruleType=='2'&&saleOrderPruleData.orderPruleLadder"><i class="el-icon-plus"></i>添加区间</span>
							<el-form-item class="marginB10"></el-form-item>
							<el-radio :label="'1'">满折<span style="color: #ccc;">(应付订单总额=订单金额X折扣)</span></el-radio>
							<el-form-item class="font12" v-for="(item,index) in vue_orderPruleDetail" key="2" v-show="saleOrderPruleData.orderPruleType=='1'">
								订单金额{{vue_info_onlyOne}}满
								<el-input class="dazhe-input" @blur="vue_orderPruleDetail_blur($event,index,'pruleKey')" style="width: 80px;" v-model.trim="item.pruleKey"></el-input>
								元，打折
								<el-input class="dazhe-input" @blur="vue_orderPruleDetail_blur($event,index,'pruleVal')" style="width: 80px;" v-model.trim="item.pruleVal"></el-input>
								%
								<i class="el-icon-delete deleteDetail" @click="vue_vue_orderPruleDetail_delete(index)" v-if="index!=0"></i>
							</el-form-item>
							<span @click="vue_orderPruleDetail_add" class="add_orderPruleDetail" v-show="saleOrderPruleData.orderPruleType=='1'&&saleOrderPruleData.orderPruleLadder"><i class="el-icon-plus"></i>添加区间</span>
							<el-form-item class="marginB10"></el-form-item>
							<span style="color: #ff4949;font-size: 12px;position: absolute;">{{vue_info_orderPruleInfo}}</span>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="客户级别" prop="gradeCodeArr">
						<el-checkbox label="全部级别" :indeterminate="vue_checkbox_indeterminate" v-model="vue_checkbox_allSelect" @change="vue_checkbox_selectAll" class="fl" style="padding-right:18px;"></el-checkbox>
						<el-checkbox-group v-model="saleOrderPruleData.gradeCodeArr" class="fl" @change="vue_checkbox_select">
							<el-checkbox v-for="item in vue_checkbox_allDate" :label="item.gradeCode" name="type">{{item.gradeName}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-form>
			</div>
			<div class="order-deta">
				<el-button type="primary" :disabled="clickBtn"  @click="save">保存</el-button>
        <el-button @click="$router.push({path:'/index'})">取消</el-button>
			</div>
		</div>
		<!--end content-->
	</section>
</template>

<script>
  import ElButton from "../../../../node_modules/element-ui/packages/button/src/button";
	export default {
    components: {ElButton},
    data() {
			var dateRule = (rule, value, callback) => {
				if(!value[0]) {
					return callback(new Error('促销时间不能为空'));
				}else{
					callback();
				}
			};
			var gradeCodeRule = (rule, value, callback) => {
				if(!value.length) {
					return callback(new Error('请至少选择一个客户级别'));
				}else{
					callback();
				}
			};
			return {
				clickBtn:false,                 //请求数据后禁用按钮
				vue_checkbox_allDate:['VIP1','VIP','普通'],  //客户级别的选项
				vue_checkbox_indeterminate:false,  //控制全选checkbox样式
				vue_checkbox_allSelect:false,  //全选checkbox
				vue_info_onlyOne:'',  //'每'
				vue_info_orderPruleInfo: "请完善促销规则", //促销明细的提示
				vue_orderPruleDetail: [{pruleKey: '',pruleVal: ''}], //促销明细的数组
				vue_rule_rules: {
					orderPruleDate: [{  required: true, validator: dateRule, trigger: 'change' }],
					gradeCodeArr: [{required: true,validator: gradeCodeRule,trigger: 'change'}],
				},
				saleOrderPruleData: {
					orderPruleDate: [], //促销时间
					orderPruleSdate: '', //促销开始时间
					orderPruleEdate: '', //促销结束时间
					orderPruleLadder: false, //促销阶梯是否启用
					orderPruleType: '2', //促销类型
					orderPruleDetail: '', //促销明细
					gradeCodeArr: [], //客户级别
					gradeCodeStr: '', //客户级别
				},
			}
		},
		watch:{
			'saleOrderPruleData.orderPruleLadder':function(val,oldVal){
				if(val){
					this.vue_info_onlyOne=""
				}else{
					this.vue_info_onlyOne="每"
				};
				this.vue_orderPruleDetail=[{pruleKey: '',pruleVal: ''}];
			},
			'saleOrderPruleData.orderPruleType':function(val,oldVal){
				this.vue_orderPruleDetail=[{pruleKey: '',pruleVal: ''}];
			},
		},
		methods: {
			vue_checkbox_selectAll(e){  //全选checkbox
				if(e.target.checked){
					this.vue_checkbox_allDate.forEach((item,index,arr)=>{
						this.saleOrderPruleData.gradeCodeArr.push(item.gradeCode)
					})
				}else{
					this.saleOrderPruleData.gradeCodeArr=[]
				}
				this.vue_checkbox_indeterminate=false;
			},
			vue_checkbox_select(value){  //全选
				let checkedCount = value.length;
				this.vue_checkbox_allSelect = checkedCount === this.vue_checkbox_allDate.length;
				this.vue_checkbox_indeterminate = checkedCount > 0 && checkedCount < this.vue_checkbox_allDate.length;
			},
			vue_orderPruleDetail_add(){  //加促销明细
				this.vue_orderPruleDetail.push({pruleKey: '',pruleVal: ''});
			},
			vue_vue_orderPruleDetail_delete(index){  //删除促销明细
				this.vue_orderPruleDetail.splice(index,1);
				this.vue_orderPruleDetail_rule();
			},
			vue_isRepeat(arr){  //数组判重
				let b = false;
				let newArr = arr.sort();
				for(var i=0,len=newArr.length;i<len;i++){
					if(newArr[i]==newArr[i+1]){
						b=true;
					}
				}
				return b;
			},
			vue_isNull(arr){  //数组item判空
				let b = false;
				for(var i=0,len=arr.length;i<len;i++){
					if(arr[i]===''){
						b=true;
					}
					break;
				}
				return b;
			},
			vue_orderPruleDetail_rule() { //促销明细非空校验
				let newArrKey=[],newArrVal=[];
				this.vue_orderPruleDetail.forEach((item,index,arr)=>{
					newArrKey.push(item.pruleKey);
					newArrVal.push(item.pruleVal);
				})
				if(this.vue_isRepeat(newArrKey)){
					this.vue_info_orderPruleInfo = '区间不能重复';
				}else{
					if(this.vue_isNull(newArrKey)||this.vue_isNull(newArrVal)){
						this.vue_info_orderPruleInfo = '请完善促销规则';
					}else{
						this.vue_info_orderPruleInfo = '';
					}
				}
			},
			vue_orderPruleDetail_blur(el,index,Key){
				if(!!el.target._value){
					this.vue_orderPruleDetail[index][Key]=parseFloat(el.target._value) ? parseFloat(el.target._value) : 1;
				};
				this.vue_orderPruleDetail_rule();
			},
			query_gradeDate(){
				this.axios({
					method:"POST",
					url:"/v3/member/grades/listAll",
					data:{}
				}).then((res)=>{
					this.vue_checkbox_allDate = res.data.list;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
			save(){  //新增新增订单促销
				this.vue_orderPruleDetail_rule();
				this.$refs['ruleForm'].validate((valid)=>{
					if(valid&&this.vue_info_orderPruleInfo==""){
						this.vue_orderPruleDetail.forEach((item,index,arr)=>{
							this.saleOrderPruleData.orderPruleDetail+=item['pruleKey']+":"+item['pruleVal']+","
						})

						this.saleGoodsPruleData.gradeCodeStr='';
						this.saleOrderPruleData.gradeCodeArr.forEach((item,index,arr)=>{
							this.saleOrderPruleData.gradeCodeStr +=item+','
						})
						this.saleOrderPruleData.orderPruleSdate = this.saleOrderPruleData.orderPruleDate[0];
						this.saleOrderPruleData.orderPruleEdate = this.saleOrderPruleData.orderPruleDate[1];
						this.clickBtn=!this.clickBtn;
						this.axios({
							method:"post",
							url:"/v3/sale/orderPrules",
							data:{
								"orderPruleSdate":this.saleOrderPruleData.orderPruleSdate,
								"orderPruleEdate":this.saleOrderPruleData.orderPruleEdate,
								"orderPruleLadder":Number(!this.saleOrderPruleData.orderPruleLadder)+"",
								"orderPruleType":this.saleOrderPruleData.orderPruleType,
								"orderPruleDetail":this.saleOrderPruleData.orderPruleDetail,
								"gradeCodeStr":this.saleOrderPruleData.gradeCodeStr
							}
						}).then((res)=>{
							this.clickBtn=!this.clickBtn;
							this.Public.openSuccess(this,"操作成功！")
							this.$router.push({path:'/marketing/saleOrderPruleList'})
						}).catch((err)=>{
							this.clickBtn=!this.clickBtn;
							this.Public.openError(this,err.response.data)
						})
					}
				})
			},
		},
		created(){
			this.query_gradeDate();
		},
		mounted() {
			document.querySelector(".goodsContent").style.height = (document.documentElement.clientHeight - 180) + 'px';
		}
	}
</script>

<style scoped>
	* {
		transition: .2s;
		box-sizing: border-box;
	}

	section {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	div.location {
		flex: 0 0 10px;
		padding: 3px 0 15px 0;
	}

	div.goodsContent {
		position: relative;
		flex: 1;
		width: 100%;
		background-color: #fff;
		padding: 0 20px 20px 0px;
		margin-top: 15px;
	}

	* {
		box-sizing: border-box;
		transition: .2s;
	}

	.order-deta {
		position: absolute;
		bottom: 20px;
		left: 20px;
		clear: both;
	}

	.order-deta span {
		margin-right: 10px;
	}

	.order-deta a {
		display: inline-block;
		width: 80px;
		height: 32px;
		text-align: center;
		line-height: 31px;
		border-radius: 20px;
		border: 1px solid #cdd9e6;
		margin-top: 30px;
	}

	.order-deta a:first-child {
		background: rgb(19, 193, 159);
		color: #fff;
		border: 0;
		height: 32px;
		line-height: 32px;
	}

	.pro-center {
		margin-top: 20px;
	}
	.deleteDetail{
		margin-left:15px;
		cursor:pointer;
		font-size:14px;
	}
	.deleteDetail:hover{
		color:#13C19F;
	}
	.add_orderPruleDetail{
		display:inline-block;
		padding:5px 5px 5px 20px;
		font-size: 12px;
		color:#13C19F;
		cursor:pointer;
	}
	.add_orderPruleDetail i.el-icon-plus{
		display:inline-block;
		margin-right:5px;
	}
	.marginB10{
		margin-bottom:10px;
	}
</style>
